<template>
    <div>
        <el-input placeholder="进度日志区，等待任务提交中..." type="textarea" resize="none" :rows="19" v-model="log" :readonly="true" ref="logInput"></el-input>
    </div>
</template>

<script>

export default {
    name: "PrintLog",
    data() {
        return {
            log: "",
        };
    },
    mounted() {
        this.setupWebSocket();
    },
    beforeDestroy() {
        // 在组件销毁时取消监听，以防止内存泄漏
        this.$socket.off('log_message', this.handleLogMessage);
    },
    methods: {
        keepLatestLines(log, maxLines) {
            const lines = log.split('\n');
            const latestLines = lines.slice(0, maxLines);
            return latestLines.join('\n');
        },
        setupWebSocket() {
            this.sockets.subscribe('log_message', message => { //组件内监听
                this.log = message.data + '\n' + this.log;
                this.log = this.keepLatestLines(this.log, 19);
            });
        },
    }
};

</script>

<style></style>